<template>
  <div>
    <!-- 三级分类导航 -->
    <TypeNav />
    <!-- 列表 -->
    <ListContainer />
    <!-- 今日推荐 -->
    <Recommend />
    <!-- 商品排行 -->
    <Rank />
    <!-- 喜欢 -->
    <Like />
    <!-- 楼层 -->
    <!-- 
      一上来floors数据是[], v-for不会遍历生成任何内容。所以初始化渲染时没有Floor组件
      mounted之后请求回来数据，重新渲染，此时因为有数据，所以才遍历生成Floor组件
      （Floor组件才完成初始化渲染，才刚刚接受到floor数据，floor数据没有变化）
     -->
    <Floor v-for="floor in floors" :key="floor.id" :floor="floor" />
    <!-- 商标 -->
    <Brand />
  </div>
</template>

<script>
import TypeNav from "@/components/TypeNav";
import ListContainer from "./ListContainer";
import Recommend from "./Recommend";
import Rank from "./Rank";
import Like from "./Like";
import Floor from "./Floor";
import Brand from "./Brand";
import { reqGetHomeFloors } from "@/api/home";

export default {
  name: "SHome",
  components: { ListContainer, Recommend, Rank, Like, Floor, Brand, TypeNav },
  async mounted() {
    this.floors = await reqGetHomeFloors();
  },
  data() {
    return {
      floors: [],
    };
  },
};
</script>
